import { Image, Text, View } from '@tarojs/components'
import React, { useCallback, useState } from 'react'
import Taro from '@tarojs/taro'
import Images from '@ASSET/Images'
import LoginVerifyBtn from '@COMPONENTS/Button/LoginVerifyBtn'
import Navigate from '@NAVIGATION/navigateManager'
import { EventsITF } from '@INTERFACES/Events'
import { openPage, showToast } from '@UTILS/common'
import { Analytic_Type } from '@CONSTANTS/analytic'
import { SHARE_ROUTE_TYPE } from '@CONSTANTS/app'
import { getCustomBtnInfo } from '@UTILS/customBtn'
import { DECISION_TYPE } from '@CONSTANTS/decision'
import style from './InvitorPopUp.module.scss'

interface Props {
  type?: string
  planId?: string
  showLogin: () => void
  homePageSpotEvents: EventsITF[]
  onClose: () => void
  isSameAccount: boolean
}

const InvitorPopUp: React.FC<Props> = ({ planId, type, showLogin, homePageSpotEvents, onClose, isSameAccount }) => {
  const [visible, setVisible] = useState(type === SHARE_ROUTE_TYPE.invite && !isSameAccount)
  const onClosePop = useCallback(() => {
    setVisible(false)
    onClose()
  }, [onClose])
  const onClickPlan = useCallback(async () => {
    Taro.tracker.trackEvent(Analytic_Type.num_invitor_cust_plan.eventId)
    const data = homePageSpotEvents?.[0]
    const { RouteType, RouteData } = data || {}
    if (!RouteType) return
    const { HasPainManagement, HasDecisionResult, p8Id, Success } = await getCustomBtnInfo(data)
    if (!Success) return
    if (HasPainManagement) {
      showToast('您还有进行中的计划，暂无法重新定制')
      return
    }
    onClosePop()
    if (HasDecisionResult) {
      const isSurvey = RouteData?.type === DECISION_TYPE.Survey
      Navigate.decisionResultPage({
        id: p8Id, isSurvey: `${isSurvey}`
      })
      return
    }
    openPage(RouteType, RouteData)
  }, [homePageSpotEvents, onClosePop])
  const onClickPlanDetail = useCallback(() => {
    if (!planId) return
    onClosePop()
    Taro.tracker.trackEvent(Analytic_Type.num_invitor_friend_plan.eventId)
    Navigate.managePlan({ tId: planId })
  }, [onClosePop, planId])
  const onClickClose = useCallback(() => {
    onClosePop()
  }, [onClosePop])
  if (!visible || type !== SHARE_ROUTE_TYPE.invite) return null
  return (
    <View className={style.container}>
      <View className={style.content}>
        <Image src={Images.home.bg_home_invitor} className={style.bg} />
        <Text className={style.title}>Hi，你的好友邀请你一起加入管理服务，点击下方来看看你的定制方案。</Text>
        <Text className={style.desc}>3分钟专业测评，精准定制你的专属疼痛解决方案。</Text>
        <LoginVerifyBtn
          onClick={onClickPlan}
          showLogin={showLogin}
          loginSuccess={onClickPlan}
        >
          <View className={style.btnContainer}>
            <Text className={style.btnText}>定制我的方案</Text>
          </View>
        </LoginVerifyBtn>
        {planId ? (
          <View className={style.btn2Container} onClick={onClickPlanDetail}>
            <Text className={style.btn2Text}>试试好友方案</Text>
          </View>
        ) : <View className={style.placeHolder} /> }
      </View>
      <View className={style.closeBtn} onClick={onClickClose}>
        <Image src={Images.home.white_close} className={style.closeIcon} mode="aspectFit" />
      </View>
    </View>
  )
}

export default InvitorPopUp
